/*
 * @Descripttion:
 * @Author: jhw
 * @Date: 2023-12-27 17:33:07
 * @LastEditors: jhw
 * @LastEditTime: 2023-12-28 11:02:46
 */
import { createApp } from 'vue';
import { Close } from '@element-plus/icons-vue';
import { ElIcon } from 'element-plus';

// id计数器
let i = 0;
let wM = new Map();

const notifys = {
  components: {
    'el-icon': ElIcon,
  },
  props: {
    title: {
      type: String,
      default: 'hello world',
    },
    id: {
      type: String,
      default: '',
    },
  },
  render(ctx) {
    const { $props, $emit } = ctx;
    console.log($props, ctx);

    return (
      <div class="notificationBox__group">
        <h2 class="notificationBox__title">{$props.title}</h2>
        <div class="notificationBox__content">
          <p></p>
        </div>
        <el-icon class="notificationBox__closeBtn" onClick={() => handleClose($props.id)}>
          <Close />
        </el-icon>
      </div>
    );
  },
};

const handleClose = (id: string) => {
  console.log(id);

  // console.log(e.target.parentNode.parentNode.parentNode.id);
  const dom = document.getElementById(`notificationBox_${id}`);
  dom?.remove();
  wM.delete(id);
  // 删除dom后，需要重新计算top值
  const doms = document.querySelectorAll('.notificationBox');
  doms.forEach((item: Element, index: number) => {
    (item as HTMLElement).style.top = `${index * 80 + 16}px`;
  });
};

export const show = ({ id, title }: { id: string; title: string }) => {
  // 判断是否已经存在当前通知id的dom，如果存在，则不再创建，直接继续添加通知内容
  // if (wM.has(id)) {
  //   console.log('已经存在该通知');
  // } else {
  const div = document.createElement('div');
  div.classList.add('notificationBox');
  // top值要根据当前的通知数量来计算
  div.style.top = `${document.querySelectorAll('.notificationBox').length * 80 + 16}px`;
  div.style.right = '16px';
  div.id = `notificationBox_${id}`;
  document.body.appendChild(div);
  const app = createApp(notifys, { id, title });
  app.mount(div);
  // wM.set(id, div);
  // }
};
